<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>XXXX | 首页</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.9.21/css/layui.css" rel="stylesheet">
    <link href="./css/custom.css" rel="stylesheet">
    
</head>
<body>
    <!-- HTML Content -->
     
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.9.21/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script>
    // Usage
    layui.use(function(){
        var layer = layui.layer;
        // Welcome
        layer.msg('消息测试： ', {icon: 6});
    });
    </script>

    <ul class="layui-nav layui-bg-gray layui-nav-child-c">
        
        <img src="./pics/logo.png" class="logo" style=" height: 40px;"/> 
        <li class="layui-nav-item layui-this"><a href=""><i class="layui-icon layui-icon-home"></i> 首页</a></li>
        <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-release"></i> 学校合作</a></li>
        <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-read"></i> 政策支持</a></li>
        <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-cart"></i> 文创商城</a></li>
        <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-add-1"></i> 加入我们</a></li>
        
        <div class="layui-input-inline" style="margin-left: 20px; font-size: 14px;">
            <input type="text" name="keyword" placeholder="搜索" style="font-size: 14px;" autocomplete="off" class="layui-input">
            <button class="layui-input-split layui-input-suffix" style="cursor: pointer;">
                <i class="layui-icon layui-icon-search"></i>
                </button>
                
        </div>
        
        <button class="layui-btn layui-btn-primary layui-border-blue" style="margin-left: 20px;">
            <i class="layui-icon layui-icon-username"></i> 注册/登录
        </button>
        
    </ul>

    <div class="layui-carousel layui-anim layui-anim-fadein" id="carousel-banner-item">
        <div carousel-item>
            <img src="./pics/banner1.png" class="banner-img" style="width: 100%;height: auto"/> 
            <img src="./pics/banner2.png" class="banner-img" style="width: 100%;height: auto"/> 
        </div>
    </div>
    <script>
        var b = 1920/600;//我的图片比例
        //获取浏览器宽度
        var W = $(window).width();
        var H = $(window).height();
        layui.use('carousel', function(){
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#carousel-banner-item'
                ,width: '100%' //设置容器宽度
                ,height: (W/b).toString()+"px" //按比例和浏览器可视页面宽度来获取高度
                ,arrow: 'always' //始终显示箭头
                //,anim: 'updown' //切换动画方式
            });
        });
        //窗口变化重新加载
        $(window).resize(function () {
        window.location.reload()
        })
    </script>
    <div class="layui-container layui-anim layui-anim-fadein" style="margin-top: 30px;">
        <div class="layui-row">
            <!-- 四列布局 -->
            <div class="layui-col-md6 layui-col-lg3">
                <div class="card-box">
                    <div class="card-top-title">在线学习 <div class="subtitle">素质教育课程资源云平台</div></div>
                    <div class="content">
                        <div class="stat-box">
                            <div class="layui-row">
                                <div class="layui-col-xs6">
                                    <div class="num">500W+</div>
                                    <div class="label">优质课程</div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="num">200+</div>
                                    <div class="label">支教学生</div>
                                </div>
                            </div>
                        </div>
                        <ul class="feature-list">
                            <li><i class="layui-icon layui-icon-star"></i>直达国家中小学智慧教育平台</li>

                            <li><i class="layui-icon layui-icon-star"></i>共建优质课程资源</li>
                        </ul>
                        <button class="layui-btn layui-btn-primary layui-border-blue">
                            <i class="layui-icon layui-icon-next"></i> 开始学习
                        </button>
                    
                    </div>
                </div>
            </div>

            <div class="layui-col-md6 layui-col-lg3">
                <div class="card-box">
                    <div class="card-top-title">夏令营 <div class="subtitle">学校合作夏令营</div></div>
                    <div class="content">
                        <div class="stat-box">
                            <div class="layui-row">
                                <div class="layui-col-xs6">
                                    <div class="num">100+</div>
                                    <div class="label">活动次数</div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="num">1K+</div>
                                    <div class="label">学生感悟</div>
                                </div>
                            </div>
                        </div>
                        <ul class="feature-list">
                            <li><i class="layui-icon layui-icon-star"></i>线上+线下共建</li>

                            <li><i class="layui-icon layui-icon-star"></i>德智体美劳全面发展</li>
                        </ul>
                        <button class="layui-btn layui-btn-primary layui-border-blue">
                            <i class="layui-icon layui-icon-next"></i> 前往咨询
                        </button>
                    
                    </div>
                </div>
            </div>

            <div class="layui-col-md6 layui-col-lg3">
                <div class="card-box">
                    <div class="card-top-title">家长园地 <div class="subtitle">家长交流社区</div></div>
                    <div class="content">
                        <div class="stat-box">
                            <div class="layui-row">
                                <div class="layui-col-xs6">
                                    <div class="num">500+</div>
                                    <div class="label">活跃家长</div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="num">1K+</div>
                                    <div class="label">交流话题</div>
                                </div>
                            </div>
                        </div>
                        <ul class="feature-list">
                            <li><i class="layui-icon layui-icon-dialogue"></i>升学政策解读</li>
                            <li><i class="layui-icon layui-icon-dialogue"></i>亲子交流技巧</li>
                        </ul>
                        <button class="layui-btn layui-btn-primary layui-border-blue">
                            <i class="layui-icon layui-icon-next"></i> 加入讨论
                        </button>
                    </div>
                </div>
            </div>

            <div class="layui-col-md6 layui-col-lg3">
                <div class="card-box">
                    <div class="card-top-title">好书汇 <div class="subtitle">公益图书捐赠平台</div></div>
                    <div class="content">
                        <div class="stat-box">
                            <div class="layui-row">
                                <div class="layui-col-xs6">
                                    <div class="num">1W+</div>
                                    <div class="label">已捐赠</div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="num">1K+</div>
                                    <div class="label">好书分享</div>
                                </div>
                            </div>
                        </div>
                        <ul class="feature-list">
                            <li><i class="layui-icon layui-icon-star"></i>好书分享交流</li>
                            <li><i class="layui-icon layui-icon-star"></i>捐赠证书下载</li>
                        </ul>
                        <button class="layui-btn layui-btn-primary layui-border-blue">
                            <i class="layui-icon layui-icon-next"></i> 立即捐赠
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-container layui-anim layui-anim-fadein">
        <div class="about-section">
            <!-- 渐变标题 -->
            <div class="about-title">关于我们</div>
            
            <div class="layui-row layui-col-space30">
                <!-- 左侧文字内容 -->
                <div class="layui-col-md6">
                    <div class="about-content">
                        <div class="layui-text">
                            <p class="layui-font-18">　　我们是一个由中南大学XXXX发起的公益团队，专注于XXXX。自成立以来，我们秉承“XXXX”的理念，致力于通过XXXX，为XXX带去知识与希望。</p>
                            <p class="layui-font-18">　　我们的团队汇聚了来自不同学院和专业的青年志愿者，他们怀揣着对公益事业的热爱与执着，共同为XXXXX助力。我们深入XXXX一线，了解XXXX的实际需求，通过实地调研、XXXXX等多种方式，为他们提供个性化的支持与帮助。</p>
                            <p class="layui-font-18">　　欢迎加入我们，一起为XXXXX贡献力量！</p>
                        </div>
                    </div>
                </div>

                <!-- 右侧图片 -->
                <div class="layui-col-md6">
                    <ul class="about-stats layui-row">
                        <li class="layui-col-xs6">
                            <div class="num">20W+</div>
                            <div class="label">受益学生</div>
                        </li>
                        <li class="layui-col-xs6">
                            <div class="num">300+</div>
                            <div class="label">合作学校</div>
                        </li>
                        <li class="layui-col-xs6">
                            <div class="num">85%</div>
                            <div class="label">课程覆盖率</div>
                        </li>
                        <li class="layui-col-xs6">
                            <div class="num">9.2</div>
                            <div class="label">家长评分</div>
                        </li>
                    </ul>
                    <div class="about-image">
                        <img src="./pics/logo.png" alt="关于我们" 
                            style="width:100%;border-radius:8px;box-shadow: 0 4px 12px rgba(0,0,0,.1)">
                            放团队合照
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer style="background-color: #f8fafe; margin-top: 50px;">
        <div class="layui-container" style="padding: 40px">
            <div class="layui-row layui-col-space30">
                <!-- 联系方式 -->
                <div class="layui-col-md4 layui-col-xs-12">
                    <div class="footer-section">
                        <h3 class = "footer-title">联系我们</h3>
                        <ul class="contact-info" >
                            <li>
                                <i class="layui-icon" style="color:#007eff;">&#xe715;</i>
                                湖南省长沙市岳麓区中南大学
                            </li>
                            <li>
                                <i class="layui-icon" style="color:#007eff;">&#xe64b;</i>
                                400-888-1234
                            </li>
                            <li>
                                <i class="layui-icon" style="color:#007eff;">&#xe618;</i>
                                123123@qq.com
                            </li>
                        </ul>
                    </div>
                </div>
    
                <!-- 公众号二维码 -->
                <div class="layui-col-md4 layui-col-xs-12">
                    <div class="footer-section" >
                        <h3 class = "footer-title">关注我们</h3>
                        <img src="./pics/logo.png" alt="公众号二维码" 
                             style="width: 150px; margin: 20px auto; display: block; border: 2px solid #007eff; padding: 5px;">
                        <p style="color:#666; font-size:14px;">扫码关注最新动态</p>
                    </div>
                </div>
    
                <!-- 相关链接 -->
                <div class="layui-col-md4 layui-col-xs-12">
                    <div class="footer-section">
                        <h3 class = "footer-title">友情链接</h3>
                        <ul class="footer-links" >
                            <li><a href="http://www.moe.gov.cn/" style="color:#666;">中华人民共和国教育部</a></li>
                            <li><a href="https://jyt.hunan.gov.cn/" style="color:#666;">湖南省教育厅</a></li>
                            <li><a href="https://www.smartedu.cn/" style="color:#666;">国家智慧教育公共服务平台</a></li>
                            <li><a href="https://www.csu.edu.cn/" style="color:#666;">中南大学</a></li>
                        </ul>
                    </div>
                </div>
            </div>
    
            <!-- 版权信息 -->
            <div class="layui-row" style="margin-top: 30px; border-top: 1px solid #007eff; padding-top: 20px;">
                <div class="layui-col-md12 layui-text-center">
                    <p style="color:#666; font-size:14px;">
                        © 2024 XXX·教育公益平台 湘ICP备000000000号-1
                        <span style="margin:0 10px;">|</span>
                        中南大学 Central South University
                    </p>
                </div>
            </div>
        </div>
    </footer>
    


</body>
</html>